<template>
  <b-container fluid>
    <page-title />
    <b-row>
      <b-col>
        <b-table
          id="table-system-logs"
          ref="table"
          responsive="md"
          selectable
          no-select-on-click
          sort-icon-left
          hover
          no-sort-reset
          sort-desc
          show-empty
          sort-by="id"
          :fields="fields"
          :items="allLogs"
          :sort-compare="onSortCompare"
          :empty-text="$t('global.table.emptyMessage')"
          :empty-filtered-text="$t('global.table.emptySearchMessage')"
          :per-page="perPage"
          :current-page="currentPage"
        >
          <template #cell(operation)="row">
            <div class="download-icon">
              <icon-download
                title="下载"
                @click="downloadLog(row.item.dataType, row.item.logMessage)"
              />
            </div>
          </template>
        </b-table>
      </b-col>
    </b-row>

    <!-- Table pagination -->
    <b-row>
      <b-col sm="6">
        <b-form-group
          class="table-pagination-select"
          :label="$t('global.table.itemsPerPage')"
          label-for="pagination-items-per-page"
        >
          <b-form-select
            id="pagination-items-per-page"
            v-model="perPage"
            :options="itemsPerPageOptions"
          />
        </b-form-group>
      </b-col>
      <b-col sm="6">
        <b-pagination
          v-model="currentPage"
          first-number
          last-number
          :per-page="perPage"
          :total-rows="getTotalRowCount(filteredRows)"
          aria-controls="table-system-logs"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script lang="ts">
import PageTitle from '@/components/Global/PageTitle.vue';

import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import BVPaginationMixin, {
  currentPage,
  perPage,
  itemsPerPageOptions,
} from '@/components/Mixins/BVPaginationMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import IconDownload from '@carbon/icons-vue/es/document--download/20';

export default {
  name: 'SystemLogs',
  components: {
    PageTitle,
    IconDownload,
  },
  mixins: [BVPaginationMixin, BVToastMixin, LoadingBarMixin, TableSortMixin],
  data(): Record<string, unknown> {
    return {
      fields: [
        {
          key: 'id',
          label: this.$t('pageSystemLogs.table.id'),
          sortable: true,
        },
        {
          key: 'logMessage',
          label: this.$t('pageSystemLogs.table.logMessage'),
          tdClass: 'text-break',
        },
        {
          key: 'operation',
          label: this.$t('pageSystemLogs.table.operation'),
        },
      ],
      currentPage: currentPage,
      itemsPerPageOptions: itemsPerPageOptions,
      perPage: perPage,
      allLogs: [
        {
          id: 0,
          logMessage: this.$t('pageSystemLogs.logMessage.HostSerialPortLogs'),
          dataType: 'Console',
        },
        {
          id: 1,
          logMessage: this.$t(
            'pageSystemLogs.logMessage.HostFailureInformation'
          ),
          dataType: 'PcieNic',
        },
      ],
    };
  },
  computed: {
    filteredRows(): any {
      return this.allLogs.length;
    },
  },
  methods: {
    onSortCompare(a: any, b: any, key: string): any {
      if (key === 'severity') {
        return this.sortStatus(a, b, key);
      }
    },
    downloadLog(dataType: string, fileName: string): void {
      this.$store
        .dispatch('systemLogs/download', { dataType, fileName })
        .then((value: any) => {
          this.successToast(value);
        })
        .catch(({ message }: any) => {
          this.errorToast(message);
        });
    },
  },
};
</script>
<style scoped>
.download-icon :hover {
  cursor: pointer;
  color: blue;
}
</style>
